<template>
  <div id="main" style="height: 500px; width: 600px"></div>
</template>

<script>
import * as echarts from 'echarts';
import {listPurpose} from "../../../api/system/rooms";

  export default {
    name: "echarts",
    dicts: [`community_rooms_purpose`],
    data(){
      return {
        myChart: '',
        queryParameter: {purposeId: 2}
      }
    },
    created() {
      this.initData()
    },
    mounted() {
      this.handelEcharts()

    },
    methods:{
      handelEcharts(){
        let chartDom = document.getElementById('main');
        this.myChart = echarts.init(chartDom);
        this.myChart.setOption({
          title: {
              text: '不同房间用途占比',
              subtext: '饼状图',
              x: 'center'
            },
            //具体点击某一项触发的样式内容
            tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            //左上侧分类条形符
            legend: {
              orient: 'vertical',
              left: 'left',
              data: []
            },
            //饼状图类型以及数据源
            series: [{
              name: '统计数量',
              type: 'pie',
              data: [],
              //设置饼状图扇形区域的样式
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
            }]
          })
      },

      async initData(){
        listPurpose(this.queryParameter).then(res => {
          let dataList = []
          console.log(res)
          for(let i = 0; i < res.length; i++){
            let o = new Object();
            o.name = res[i].label;
            o.value = res[i].countPurpose;
            dataList[i] = o;
          }
          this.myChart.setOption({
            legend: {
              data: res.label,
            },
            series: [{
              data: dataList,
            }]
          })
        })
      }
    }
  }
</script>
